.calendar{
  padding: 0 24rpx;
  .calendar-top{
    font-size: 38rpx;
    color: #313131;
    padding: 40rpx 0;
    .calendar-title{
      position: relative;
      .calendar-year{
        position: absolute;
        right: 0;
        bottom: 0;
        transform: translate(100%, 0);
        font-size: 20rpx;
      }
    }
    .calendar-prev{
      font-size: 25rpx;
      color: #313131;
      padding-left: 30rpx;
      position: relative;
      &::after{
        content: "";
        display: block;
        width: 13rpx;
        height: 20rpx;
        background: url(https://cdn.mixpwr.com/baishi/icon-arrow.png) center top /100% no-repeat;
        
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
      }
    }
    
    .calendar-next{
      font-size: 25rpx;
      color: #313131;
      padding-right: 30rpx;
      position: relative;
      &::after{
        content: "";
        display: block;
        width: 13rpx;
        height: 20rpx;
        background: url(https://cdn.mixpwr.com/baishi/icon-arrow.png) center top /100% no-repeat;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    
  }
  .calendar-body {
    .calendar-week{
      font-size: 28rpx;
      color: #4d4d4d;
      .calendar-week-item{
        width: 14%;
        text-align: center;
        line-height: 80rpx;
        flex-shrink: 0;
        &:first-child,&:last-child{
          color: #ff5a7b;
        }
      }
      
    }
    .calendar-day{
      flex-wrap: wrap;
      .calendar-day-item{
        position: relative;
        width: 14%;
        flex-shrink: 0;
        height: 104rpx;
        font-size: 28rpx;
        color: #000000;
        &:nth-child(7n + 1) {
          color: #ff5a7b;
        }
        &:nth-child(7n + 7) {
          color: #ff5a7b;
        }
        &.prev-month, &.next-month{
          color: rgba(0,0,0,0.4);
        }
      }
    }
  }
}
























